<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <input type="text" style="margin-top: 200px;">
    <input type="text" value="请输入" style="color: #999;">
    <div style="width: 100px;height: 100px;background: orange;position: absolute;top: 0;left: 0;"></div>
    <script>
        //       事件分类
        // 鼠标事件
        // onclick  当点击鼠标时运行脚本 click = mousedown + mouseup;
        // ondblclick  当双击鼠标时运行脚本
        // onmousedown  当按下鼠标按钮时运行脚本
        // onmouseup  当松开鼠标按钮时运行脚本
        // onmousemove  当鼠标指针移动时运行脚本
        // onmouseover  当鼠标指针移动到元素之上时运行脚本，不可以阻止冒泡
        // onmouseout  当鼠标指针移出元素时运行脚本,不可以阻止冒泡
        // onmouseenter  当鼠标指针移至元素之上时运行脚本,不可以阻止冒泡
        // onmouseleave  当鼠标指针移出元素时运行脚本,可以阻止冒泡
        // onmousewheel  当转动鼠标滚轮时运行脚本
        // onscroll  当滚动元素的滚动条时运行脚本

        // 用button来区分鼠标的按键，0/1/2
        // document.onmousedown = function(e) {
        //         if (e.button == 0) {
        //             console.log('左');
        //         } else if (e.button == 2) {
        //             console.log('右');
        //         }
        //     }
        // DOM3标准规定：click事件只能监听左键，只能通过mousedown和mouseup来判断鼠标键
        // 如何解决mousedown和click的冲突

        // 拖拽
        // window.onload = function() {
        //     var drag = document.getElementsByTagName('div')[0];
        //     // //点击某物体时，用drag对象即可，move和up是全局区域，
        //     // 也就是整个文档通用，应该使用document对象而不是drag对象(否则，采用drag对象时物体只能往右方或下方移动)  
        //     drag.onmousedown = function(event) {
        //         var event = event || window.event; //兼容IE浏览器
        //         //    鼠标点击物体那一刻相对于物体左侧边框的距离=点击时的位置相对于浏览器最左边的距离-物体左边框相对于浏览器最左边的距离
        //         var diffX = event.clientX - drag.offsetLeft;
        //         var diffY = event.clientY - drag.offsetTop;
        //         if (typeof drag.setCapture !== 'undefined') {
        //             drag.setCapture();
        //         }
        //         document.onmousemove = function(event) {
        //             var event = event || window.event;
        //             var moveX = event.clientX - diffX;
        //             var moveY = event.clientY - diffY;
        //             if (moveX < 0) {
        //                 moveX = 0
        //             } else if (moveX > window.innerWidth - drag.offsetWidth) {
        //                 moveX = window.innerWidth - drag.offsetWidth
        //             }
        //             if (moveY < 0) {
        //                 moveY = 0
        //             } else if (moveY > window.innerHeight - drag.offsetHeight) {
        //                 moveY = window.innerHeight - drag.offsetHeight
        //             }
        //             drag.style.left = moveX + 'px';
        //             drag.style.top = moveY + 'px'
        //         }
        //         document.onmouseup = function(event) {
        //             this.onmousemove = null;
        //             this.onmouseup = null;
        //             //修复低版本ie bug  
        //             if (typeof drag.releaseCapture != 'undefined') {
        //                 drag.releaseCapture();
        //             }
        //         }
        //     }
        // }

        // 时间戳   加锁
        // var firTime = 0;
        // var lastTime = 0;
        // var key = false;
        // document.onmousedown = function() {
        //     firTime = new Date().getTime();
        // }
        // document.onmouseup = function() {
        //     lastTime = new Date().getTime();
        //     if (lastTime - firTime < 300) { //点击时间超过0.3秒时执行
        //         key = true;
        //     }
        // }

        // 事件处理模型   冒泡  捕获
        // 什么是事件捕获   addEventListener('click',function(){},true)
        // ele.setCapture();仅在IE中好使，该元素会捕获页面上发生的所有的事件到自己身上
        // ele.releasetCapture();释放

        //     键盘事件
        // keydown  keyup  keypress
        // keydown > keypress > keyup
        // keydown和keypress的区别
        //    keydown可以响应任意键盘按键，keypress只可以响应字符类键盘按键
        //    keypress返回ASCII码，可以转换成相应字符
        //    keydown监测字符类按键不准
        // document.onkeydown = function(e) {
        //     console.log(e);
        // }
        // document.onkeypress = function(e) {
        //     console.log(e);
        // }

        // document.onkeypress = function(e) {
        //     console.log(String.fromCharCode(e.charCode));
        // }//测出按下的按键

        // 文本操作事件
        // input,focus,blur,change
        // var input = document.getElementsByTagName('input')[0];
        // input.oninput = function(e) {
        //     console.log(this.value);
        //  }
        // input.onchange = function(e) {
        //         console.log(this.value);
        //     } //鼠标聚焦前和聚焦后状态不一样触发
        // var input = document.getElementsByTagName('input')[1];
        // input.onfocus = function(e) {
        //     if (this.value == '请输入') {
        //         this.value = '';
        //     }
        // }
        // input.onblur = function(e) {
        //     if (this.value == '') {
        //         this.value = '请输入';
        //     }
        // }

        // 窗体操作类（window上的事件）
        // scroll load
        // window.onload = function() {
        //         // 要等整个页面全部准备完毕后才会执行，效率最低
        //     }
        // 练习：fixed定位 js兼容版


        // 案例：
        // 1.完善轮播图，加按钮
        // 2.提（qie）取密码框的密码
        // 3.输入框功能完善
        // 4.菜单栏
        // 5.贪吃蛇游戏
        // 6.扫雷游戏
    </script>
</body>

</html>